

<!-- 手机验证码 -->
<template>
	<view class="verifyCode-Container">
		<view v-if="!sendFlag" @click="smsCodeHandler" class="getVerifyCode">
			获取验证码
		</view>
		<view v-else class="waitForSeconds">
			{{timeout}}s后重新获取
		</view>
	</view>
</template>

<script>
	import app from "@/App.vue"

	export default {
		data() {
			return {
				sendFlag: false,
				timeout: 60
			};
		},
		components: {},
		props: {
			phoneNumber: String,
			noPhoneTips: {
                type: String,
                default: '请输入手机号码'
            }
		},
		methods: {

			//发送验证码
			smsCodeHandler() {

				let that = this;

				if (that.sendFlag) {
					return;
				}

				if (!that.phoneNumber) {
					//提示输入手机号
					that.$api.msg(this.noPhoneTips);
					return;
				}
				
				that.sendFlag = true;
				uni.showLoading({
					title: '发送中…'
				});
				that.$api.globalUtil.requestAjax({
					url: "/CustomerApi/getCode",
					method: "POST",
					data: {
						phone: that.phoneNumber
					},
					success: function(res) {
					},
					error: function() {
						that.sendFlag = false;
						that.timeout = 60;
						// uni.hideLoading();
					},
					complate: function(res) {
						if(res.data.success) {
							that.$api.msg("发送成功");
							
							var timeout_id = setInterval(function() {
								if (that.timeout == 0) {
									clearInterval(timeout_id);
									that.sendFlag = false;
									that.timeout = 60;
									
									return;
								}
						
								that.timeout = that.timeout - 1;
							}, 1000);
						}else {
							that.sendFlag = false;
							that.timeout = 60;
							that.$api.msg(res.data.msg || "发送失败");
						}
						
						// uni.hideLoading();
					}
				});
			}
		}
	};
</script>

<style lang="scss">

	.verifyCode-Container {
		position: relative;
		// width:140rpx;
		height:44rpx;
		line-height: 44rpx;
		border-radius:22rpx;
		text-align: center;
		font-size:22rpx;
		font-family:PingFang;
		color: #FE5E49;
		border: 1upx solid #FE5E49;
		padding: 0upx 15upx;
		.waitForSeconds {
			color: #999999;
		}
	}
</style>



